<template>
  <div v-if="overviewAuth">
    <page-header :title="$t('m.finance_Income')" :has-return="false">
      <!--导出-->
      <el-button type="primary" @click="exportForm" v-if="exportsAuth">{{
        $t('m.exports')
      }}</el-button>
    </page-header>

    <div class="container">
      <div class="box_index">
        <!--tab栏-->
        <div class="el_table_div" style="padding-bottom:0;">
          <el-tabs v-model="activeName" @tab-click="switchTab">
            <el-tab-pane
              :label="item.label"
              :name="item.value"
              v-for="item in optionsTab"
              :key="item.value"
            ></el-tab-pane>
          </el-tabs>
        </div>

        <!--订单营收-->
        <div class="card card2" v-if="activeName == '1'">
          <table-finance-overview-order ref="table1" />
        </div>

        <!--平台利润-->
        <div class="card card2" v-if="activeName == '2'">
          <table-finance-overview-platform-profit ref="table2" />
        </div>

        <!--伙伴分成-->
        <div class="card card2" v-if="activeName == '3'">
          <table-finance-overview-partner-brokerage ref="table3" />
        </div>

        <!--伙伴提现-->
        <div class="card card2" v-if="activeName == '4'">
          <table-finance-overview-partner-withdraw ref="table4" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import TableFinanceOverviewOrder from '@/components/tables/table-finance-overview-order.vue'
import TableFinanceOverviewPartnerBrokerage from '@/components/tables/table-finance-overview-partner-brokerage.vue'
import TableFinanceOverviewPlatformProfit from '@/components/tables/table-finance-overview-platform-profit.vue'
import TableFinanceOverviewPartnerWithdraw from '@/components/tables/table-finance-overview-partner-withdraw.vue'

export default {
  components: {
    TableFinanceOverviewPartnerWithdraw,
    TableFinanceOverviewPlatformProfit,
    TableFinanceOverviewPartnerBrokerage,
    TableFinanceOverviewOrder
  },
  data () {
    return {
      optionsTab: [
        { checked: true, value: '1', label: this.$t('m.orderRevenue') },
        { checked: false, value: '2', label: this.$t('m.orderDivide') },
        { checked: false, value: '3', label: this.$t('m.Partner_profit') },
        { checked: false, value: '4', label: this.$t('m.Partner_withdrawal') }
      ],
      // 导出配置
      exportOptions: {
        name: '',
        fields: {},
        data: [],
        meta: [
          [
            {
              ' key ': ' charset ',
              ' value ': ' utf- 8 '
            }
          ]
        ]
      },
      activeName: '1',
      exportSearch: '',
      overviewAuth: this.permissionsId(61), // 财务概览列表
      exportsAuth: this.permissionsId(187) // 导出操作
    }
  },
  created () {
    if (!this.overviewAuth) {
      return
    }
    if (this.$route.params.activeName) {
      this.activeName = this.$route.params.activeName
    }
  },
  mounted () {},
  methods: {
    // 切换tab
    switchTab () {
      this.remPageNum()
    },

    //导出表格
    exportForm () {
      const tableInstance = this.$refs[`table${this.activeName}`]
      this.exportSearch = { ...tableInstance.params, variableTitleHead: [] }
      const fastTableOptions = tableInstance.fastTableOptions
      fastTableOptions.columns.forEach(item => {
        item.label ? this.exportSearch.variableTitleHead.push(item.label) : ''
      })
      // console.log(this.exportSearch.variableTitleHead)
      this.exportSearch.variableTitleHead = this.exportSearch.variableTitleHead.toString()
      // console.log(this.exportSearch.variableTitleHead)
      if (this.activeName == '1') {
        this.exportOrder(this.exportSearch)
      }
      if (this.activeName == '2') {
        this.exportProfit(this.exportSearch)
      }
      if (this.activeName == '3') {
        this.exportPartner(this.exportSearch)
      }
      if (this.activeName == '4') {
        this.exportWithdraws(this.exportSearch)
      }
    },

    //导出订单营收
    exportOrder (item) {
      this.$openLoading()
      this.$api.finance.getOrderExcel(item).then(res => {
        window.downExcel(res, this.$t('m.FinancialOverview_Order_revenue'))
        this.$closeLoading()
      })
    },
    //导出平台利润
    exportProfit (item) {
      this.$openLoading()
      this.$api.brokerage.getExportPlatformProfit(item).then(res => {
        window.downExcel(res, this.$t('m.FinancialOverview_Platform_profit'))
        this.$closeLoading()
      })
    },
    //导出伙伴分成
    exportPartner (item) {
      this.$openLoading()
      this.$api.brokerage.getExportPartnerBrokerage(item).then(res => {
        window.downExcel(res, this.$t('m.FinancialOverview_Partners_profit'))
        this.$closeLoading()
      })
    },
    //导出伙伴提现
    exportWithdraws (item) {
      this.$openLoading()
      this.$api.withdraw.getExportWithdraws(item).then(res => {
        window.downExcel(res, this.$t('m.FinancialOverview_Partner_withdrawal'))
        this.$closeLoading()
      })
    }
  }
}
</script>
<style scoped lang="scss">
.card2 {
  border-radius: 10px !important;
  padding: 0 !important;
  border: none !important;
}
</style>
